<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">楼宇名称：</div>
      <!-- clearable	是否可清空 -->
      <el-input
        v-model="params.name"
        placeholder="请输入内容"
        class="search-main"
        @clear="doSearch"
      />
      <el-button
        type="primary"
        @click="doSearch"
      >查询</el-button>
    </div>
    <!-- 添加楼宇 按钮 -->
    <el-button
      type="primary"
      @click="addBuilding"
    >添加楼宇</el-button>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        style="width: 100%"
        :data="buildingList"
      >
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          label="楼宇名称"
          prop="name"
          width="180"
        />
        <el-table-column
          label="层数"
          prop="floors"
        />
        <el-table-column
          label="在管面积(m²)"
          prop="area"
        />
        <el-table-column
          label="物业费(元/m²)"
          prop="propertyFeePrice"
        />
        <el-table-column
          label="状态"
          prop="status"
          :formatter="formatStatus"
        />

        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="edit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="confirmDel(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页容器 -->
    <div class="page-container">
      <!-- 分页器 pagination -->
      <el-pagination
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    ,

    <!-- 添加楼宇弹框 -->
    <el-dialog
      title="添加楼宇"
      :visible="dialogVisible"
      width="580px"
      @close="closeDialog"
    >
      <span>这是一段信息</span>
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="addFormRules"
        >
          <el-form-item
            label="楼宇名称"
            prop="name"
          >
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item
            label="楼宇层数"
            prop="floors"
          >
            <el-input v-model="addForm.floors" />
          </el-form-item>
          <el-form-item
            label="在管面积"
            prop="area"
          >
            <el-input v-model="addForm.area" />
          </el-form-item>
          <el-form-item
            label="物业费"
            prop="propertyFeePrice"
          >
            <el-input v-model="addForm.propertyFeePrice" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button
          size="mini"
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="confirmAdd"
        >确 定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  createBuildingListAPI,
  delBuildingListAPI,
  getBuildingListAPI,
  editBuildingListAPI
} from '@/api/building'
export default {
  name: 'Building',
  data () {
    return {
      buildingList: [], // table列表
      total: 0,
      // 请求参数 params
      params: {
        page: 1,
        pageSize: 5,
        name: '' // 增加字段name
      },
      dialogVisible: false, // 弹出不显示
      // 添加房屋===== 对象
      addForm: {
        name: '',
        floors: null,
        area: null,
        propertyFeePrice: null
      },
      // 添加房屋 === 效验规则对象
      addFormRules: {
        name: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' }
        ],
        area: [{ required: true, message: '请输入楼宇面积', trigger: 'blur' }],
        propertyFeePrice: [
          { required: true, message: '请输入楼宇物业费', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {
    this.getBuildingList()
  },
  methods: {
    // 1.获取楼宇列表
    async getBuildingList () {
      const res = await getBuildingListAPI(this.params)
      // 存入table列表
      this.buildingList = res.data.rows
      // 存入总条数
      this.total = res.data.total
      // console.log('buildingList', this.buildingList)
    },
    // 2，分页处理===点击实现分页切换
    handleCurrentChange (page) {
      // 更改参数，重新请求渲染
      this.params.page = page
      // 重新获取数据渲染
      this.getBuildingList()
    },
    // 3.格式化状态方法
    formatStatus (row, column) {
      const statusMap = {
        0: '租赁中',
        1: '闲置中'
      }
      return statusMap[row.status]
    },
    // 4.搜索处理
    doSearch () {
      // 1. 重置page为1
      this.params.page = 1
      // 2. 调用获取列表接口
      this.getBuildingList(this.params.name)
    },
    // 5,点击添加 楼宇弹框
    addBuilding () {
      this.dialogVisible = true
    },
    // 6,失去焦点 关闭 楼宇弹框
    closeDialog () {
      this.dialogVisible = false
    },
    // 7,添加房屋信息
    // 适配新增和编辑模式
    confirmAdd () {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          if (this.addForm.id) {
            console.log('100', this.addForm)
            await editBuildingListAPI(this.addForm)
          } else {
            // 1. 提交接口
            console.log('100', this.addForm)
            await createBuildingListAPI(this.addForm)
          }
          // 2. 获取列表
          this.getBuildingList()
          // 3. 关闭弹框
          this.dialogVisible = false
        }
      })
    },
    // 8,删除房屋信息
    confirmDel (id) {
      this.$confirm('确认删除当前楼宇吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 调删除接口
          await delBuildingListAPI(id)
          // 调渲染接口
          this.getBuildingList()
        })
        .catch(() => {})
    },
    // 9. 点击编辑时打开弹框并回显数据
    edit (row) {
      this.dialogVisible = true

      const { id, name, floors, area, propertyFeePrice } = row
      this.addForm = {
        id,
        name,
        floors,
        area,
        propertyFeePrice
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.department-container {
  padding: 10px;
}
.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;
  .search-label {
    width: 100px;
  }
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
</style>
